<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>信息列表</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<link rel="stylesheet" href="../css/index.css" />
		<style>
			#listbox{
				position: absolute;
				top: 5px;
				bottom: 5px;
				left: 0;
				right: 0;
				margin: 0 20px 0 20px;
				}
			.listuser{
				width: 96%;
				height: 100px;
				padding: 35px 20px 0 20px;
				margin: 0 5px 0 5px;
				border-bottom: 1px  #161823 solid;
				cursor: pointer;
			}
			.user{
				border-radius:50% ;
				float: left;
				margin-right:20px;
			}
			.messagetitle{
				padding-top:5px;
				color: white;
			}
			.titlespan{
				color:	#cccccf;
				font-size: 14px;
			}
			.titletime{
				padding-top: 10px;
				color:	#cccccf;
				font-size: 12px;
			}
			a{
				color:#cccccf;
				text-decoration: none;
			}
			a:hover{
				color:white;
				text-decoration: none;
			}
			.content{
				position:relative;
				top: -85px;
				right: -93%;
				color:#cccccf;
				width: 100px;
				height: 100px;
			}
			.content img{
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="listbox">
				<!--消息列表-->
				<div class="listuser" v-for="inform in informList">
					<img class="user" :src="inform.buserinfo.headImg" width="60px" height="60px"/>
					<div class="messagetitle"><strong>{{inform.buserinfo.userName}}</strong>&nbsp;&nbsp;<span class="titlespan"><a href="#">{{inform.releasetable.userId!=inform.buid?"点赞了你的视频":"点赞了你的评论"}}</a></span>
					<div class="titletime">{{inform.informTime}}</div>
					</div>
					<div class="content">
						<label v-if="inform.releasetable!=null"><img :src="inform.releasetable.worksCover"/></label>
						<label v-if="inform.commenttable!=null">{{inform.commenttable.commentContent}}</label>
					</div>
				</div>
				
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				informList:[],
				num:20
			},methods:{
				
			},
			mounted() {
				var uid=localStorage.getItem("userid")
				axios.get(API+'getInform?uid='+uid+"&informType="+0).then(response => {
					this.informList=response.data
				}).catch(error => {
					console.error(error);
				});
			}
		})
	</script>
</html>
